<template>
  <div>
    <el-form :model="formFileds">
      <el-row :gutter="24">

        <el-col :span="12">
          <el-form-item>
            <el-input v-model="formFileds.text"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item>
            <el-button type="primary" @click="search()">
              查询
            </el-button>

            <el-button type="primary" @click="add()">
              增加
            </el-button>

          </el-form-item>
        </el-col>

      </el-row>


    </el-form>

    <!--表格内容-->
    <el-table ref="list" :data="tableData" style="width: 100%;margin-bottom: 5=1px;" border stripe highlight-current-row
      :default-sort="{ prop: 'pmggbh', order: 'descending' }"
      :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}"
      @row-click="handleRowClick">
      <el-table-column fixed type="selection" width="45">
      </el-table-column>
      <el-table-column property="pmggbh" label="公告编号" width="120px">
      </el-table-column>
      <el-table-column property="pmggmc" label="公告名称">
      </el-table-column>
      <el-table-column property="pmhmc" label="拍卖会名称" width="100px">
      </el-table-column>
      <el-table-column property="pmsj" label="拍卖时间" align="center" width="200px">
      </el-table-column>
      <el-table-column property="pmdd" label="拍卖地点" align="center" width="150px">
      </el-table-column>
      <el-table-column property="fbzt" label="发布状态" align="center">
      </el-table-column>
      <el-table-column property="tjsj" label="提交时间" align="center" width="200px">
      </el-table-column>
      <el-table-column property="mtfbsj" label="媒体发布时间" align="center" width="200px">
      </el-table-column>
      <el-table-column property="ggksrq" label="公告开始日期" align="center" width="200px">
      </el-table-column>
      <el-table-column property="ggjsrq" label="公告结束日期" align="center" width="200px">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-dropdown @command="handleCommand" v-if="scope.row.fbzt == '待提交'">
            <el-button type="primary">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="beforeHandleCommand('Compile',scope.row)">编辑</el-dropdown-item>
              <el-dropdown-item :command="beforeHandleCommand('rowDel',scope.row)">删除</el-dropdown-item>
              <el-dropdown-item :command="beforeHandleCommand('up',scope.row)">上架</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-button v-else type="danger" @click="down(scope.row)">下架</el-button>

        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination :page-sizes="[10, 20, 30, 40, 100]" :page-size=this.pageSize :total=this.total :current-page="currentPage" 
    layout="total, sizes, prev, pager, next, jumper" @current-change="getCurrentPage" @size-change="getSize">
    </el-pagination>

    <Add v-if="isShowAddDialog" :isShowAddDialog="isShowAddDialog" @dialogClose="dialogClose" @getList="getList"></Add>
    <Compile v-if="isShowComDialog" :isShowComDialog="isShowComDialog" @dialogClose="dialogClose" @getList="getList" :rowData="rowData"></Compile>

  </div>

</template>
   
<script>
import { getAll,getDataBy,delData,submit,shelves } from '@/api/auctionManage/noticeManage';
import Add from "./noticeManageAdd.vue";
import Compile from "./noticeManagecompile.vue"
export default {
  name: "Table",
  components: {
    Add,
    Compile,
  },
  data() {
    return {
      pageSize: 10,
      total: 0,
      currentPage: 1,
      param: '',
      formFileds: {
        text: '',
        param: {}
      },
      rowData:{},
      tableData: [
        {
          pmggbh: '',//拍卖公告编号
          pmggmc: '',//拍卖公告名称
          pmgglx: 1,//拍卖公告类型
          pmhmc: '',//拍卖会名称
          pmss: '',//拍卖时间
          pmdd: '',//拍卖地点
          yzsj: '',//预展时间
          yzdd: '',//预展地点
          lxr: '',//联系人
          lxdh: '',//联系电话
          mtmc: '',//媒体名称
          szmtjt: '',//公告所在媒体整版截图
          txjt: '',//公告特写截图
          wyjt: '',//上传网页截图
          gglj: '',//公告链接
          fbzj: '',//发布状态，0待提交，1已提交
          tjsj: '',//提交时间
          mtfbsj: '',//媒体发布时间
          sffmsh: '',//是否为罚没涉黑涉案查处扣押资产
          ggnr: '',//公告内容
          jpxz: '',//竞拍须知
          scfj: '',//上传附件
          deleteflag: false,//逻辑删除
          creates: '',//创建时间
          fbmt: '',// 发布媒体，1为纸质媒体，2为网络媒体
          pmhbh: '',//拍卖会编号
          ggksrq: '',//公告开始日期
          ggjsrq: '',//公告结束日期
          sfkygg: false,//保留价或起拍价是否可以公告
        }
      ],
      isShowEditDialog: false,
      isShowAddDialog: false,
      isShowComDialog:false,
    }
  },
  methods: {
    dialogClose() {
      this.isShowEditDialog = false;
      this.isShowAddDialog = false;
      this.isShowComDialog = false;
      this.getList();
    },
    add() {
      this.isShowAddDialog = true;
    },
    Compile(row){
      this.isShowComDialog = true;
      this.rowData = row;
    },
    rowDel(row) {
      console.log(row.id);
      // 让当前删除按钮失焦
      // event.target.blur();
      this.$confirm('确定要删除当前行吗？', '删除', {
        comfirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        // let data = {
        //   id: row.id
        // }
        delData(row.id).then((res) => {
          if(res){
            console.log(res);
            this.tableData.splice(row.id, 1);
            this.$message.success('删除成功');
            this.getList();
          }
        })

      });
    },
    // 选中当前行-当前行的复选框被勾选
    setCurRowChecked(row) {
      // console.log(row);
      // this.$refs.list.clearSelection();
      // this.$refs.list.toggleRowSelection(row);
    },
    handleRowClick(row, event, column) {
      // 仅选中当前行
      this.setCurRowChecked(row);
      console.log('row',row);
      // console.log('pmhbh',row.pmhbh);
    },
    getCurrentPage(currentPage){
      // console.log(currentPage);
      this.currentPage = currentPage;
      this.getList();
    },
    getSize(pageSize){
      // console.log(pageSize);
      this.pageSize = pageSize;
      this.getList();
    },
    getList(){
      this.param = 'pageno=' + this.currentPage + '&countonepage=' + this.pageSize;
      getAll(this.param).then((res) => {
        if(res){
          // console.log(res);
          this.total = res.data.total;
          this.tableData = res.data.list;
        }
      })
    },
    search(){
      if(!this.formFileds.text){
        this.getList();
        return ;
      }
      this.formFileds.param = 'pageno=' + this.currentPage + '&countonepage=' + this.pageSize + '&input=' + this.formFileds.text;
      console.log(this.formFileds.param);
      getDataBy(this.formFileds.param).then((res) => {
        if(res){
          // console.log(res);
          this.total = res.data.total;
          this.tableData = res.data.list;
        }
      })
    },
    handleCommand(command){
      if(command.command == 'Compile'){
        this.Compile(command.row);
      }
      else if(command.command == 'rowDel'){
        this.rowDel(command.row);
      }
      else if(command.command == 'up'){
        this.up(command.row);
      }
    },
    beforeHandleCommand(command,row){
      return{
        'command': command,
        'row': row
      }
    },
    up(row){
      let data = 'id=' + row.id;
      submit(data).then((res) => {
        if(res){
          console.log(res);
          this.$message.success('上架成功');
          this.getList();
        }
      })
    },
    down(row){
      let data = 'id=' + row.id;
      shelves(data).then((res) => {
        if(res){
          console.log(res);
          this.$message.success('下架成功');
          this.getList();
        }
      })
    }
    
  },
  mounted(){
    this.getList();
  }
}
</script>
  
<style scoped lang="less">
.el-form {
  padding: 0 10px;
}

.el-date-editor {
  width: 100% !important;
}
</style>
  